<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>牛马计时器</title>
    <style>
        /* 全局样式 */
        body {
            background: linear-gradient(135deg, #ffecd2, #fcb69f); /* 渐变背景 */
            font-family: "Helvetica Neue", Arial, sans-serif; /* 更漂亮的字体 */
            margin: 0;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #333;
            line-height: 1.5; /* 增加行高 */
        }
        p {
          margin: 0;
          padding: 0;
        }
        .container {
            background: #ffffff;
            border-radius: 16px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); /* 更立体的阴影 */
            padding: 24px;
            width: 360px;
            margin: 20px;
        }

        /* 标题 */
        .header {
            text-align: center;
            margin-bottom: 20px;
        }

        .title {
            font-size: 28px;
            color: #ff9800;
            font-weight: bold;
            margin-bottom: 8px;
        }

        .current-time {
            font-size: 16px;
            color: #666;
        }

        /* 卡片样式 */
        .card {
            background: #fdfdfd;
            border-radius: 12px;
            padding: 16px;
            margin: 12px 0;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            border: 1px solid #f0f0f0;
        }

        .card-title {
            font-size: 18px;
            color: #333;
            font-weight: bold;
            margin-bottom: 12px;
        }

        .info-row {
            display: flex;
            justify-content: space-between;
            margin: 8px 0;
            font-size: 16px;
        }

        .highlight {
            color: #ff9800;
            font-weight: bold;
        }

        /* 状态卡片 */
        .status-card {
            background: #f0f8ff;
            padding: 16px;
            border-radius: 12px;
            margin-top: 16px;
            text-align: center;
            font-size: 16px;
            color: #1976d2;
            border: 1px solid #e0f2f7;
        }

        /* 收入信息 */
        .income-info {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-top: 16px;
        }

        .income-item {
            background: #f9f9f9;
            padding: 12px;
            border-radius: 12px;
            text-align: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
            border: 1px solid #f0f0f0;
        }

        .income-item .highlight {
            font-size: 20px;
        }
        input {
          /* background-color: #212121; */
          max-width: 100px;
          height: 24px;
          border: 2px solid #ff9800;
          border-radius: 5px;
          margin-left: 5px;
        }

        input:focus {
          color: rgb(0, 255, 255);
          /* background-color: #212121; */
          outline-color: rgb(0, 255, 255);
          box-shadow: -3px -3px 15px rgb(0, 255, 255);
          transition: .1s;
          transition-property: box-shadow;
        }
        select {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            padding: 8px;
            border: 2px solid #ff9800;
            border-radius: 5px;
            color: #333;
            font-size: 16px;
            width: 110px;
        }
 
        /* 美化select的下拉箭头 */
        select:after {
            content: "\25BC"; /* Unicode编码，表示向下的箭头 */
            position: absolute;
            top: 12px;
            right: 10px;
        }
        select:focus {
          color: rgb(0, 255, 255);
          /* background-color: #212121; */
          outline-color: rgb(0, 255, 255);
          box-shadow: -3px -3px 15px rgb(0, 255, 255);
          transition: .1s;
          transition-property: box-shadow;
        }
        /* 美化选项内容 */
        option {
            padding: 5px;
            background-color: #f9f9f9;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 标题 -->
        <div class="header">
            <div class="title">牛马计时器</div>
            <div class="current-time" id="currentTime"></div>
        </div>

        <!-- 基本信息 -->
        <div class="card">
            <div class="card-title">基本信息</div>
            <!-- <div class="info-row">
                <span>入职时间</span>
                <span>2025年12月</span>
            </div> -->
            <div class="info-row">
                <span>工作时间</span>
                <p>
                  <input type="time" id="start-time">
                  -
                  <input type="time" id="end-time">
                </p>
            </div>
            <div class="info-row">
                <span>休息制度</span>
                <p>
                  <select id="rest">
                    <option value="1">双休</option>
                    <option value="2">单休周六</option>
                    <option value="3">单休周日</option>
                    <option value="4">无休</option>
                  </select>
                </p>
            </div>
            <div class="info-row">
                <span>月薪</span>
                <p>
                  ¥<input type="text" class="highlight" id="salary">
                </p>
              </div>
        </div>

        <!-- 工作状态 -->
        <div class="card">
            <div class="card-title">工作状态</div>
            <div class="info-row">
                <span>工作状态</span>
                <span id="workStatus" class="highlight">计算中...</span>
            </div>
            <div class="info-row">
                <span>今日工作时长</span>
                <span id="workDuration" class="highlight">0小时0分</span>
            </div>
            <div class="info-row">
                <span>下班倒计时</span>
                <span id="salaryCountdown" class="highlight">计算中...</span>
            </div>
        </div>

        <!-- 收入信息 -->
        <div class="income-info">
            <div class="income-item">
                <div class="highlight" id="todayIncome">¥0</div>
                <div>今日已收入</div>
            </div>
            <div class="income-item">
                <div class="highlight" id="averageIncome">¥0</div>
                <div>日均收入</div>
            </div>
        </div>

        <!-- 状态卡片 -->
        <div id="statusMessage" class="status-card"></div>
    </div>

    <script>
      const salary = document.querySelector('#salary');
      const startTime = document.querySelector('#start-time');
      const endTime = document.querySelector('#end-time');
      const rest = document.querySelector('#rest');
      salary.value = 3000;
      startTime.value = '09:00';
      endTime.value = '18:00';
      rest.value = '1'
        function updateTime() {
            const now = new Date();
            
            // 更新当前时间显示
            document.getElementById('currentTime').textContent = now.toLocaleString('zh-CN', {
                year: 'numeric',
                month: 'long',
                day: 'numeric',
                weekday: 'long',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            });

            // 检查是否是周六
            const isSaturday = now.getDay() === 6;
            const isSunday = now.getDay() === 7;
            let isRest = false;
            if (rest.value === '1') {
              isRest = isSaturday || isSunday;
            } else if (rest.value === '2') {
              isRest = isSaturday;
            } else if (rest.value === '3') {
              isRest = isSunday;
            }
            if (isRest) {
                document.getElementById('workStatus').textContent = "休息";
                document.getElementById('workDuration').textContent = "休息日";
                document.getElementById('salaryCountdown').textContent = "休息中";
                document.getElementById('todayIncome').textContent = "休息日，无收入";
                document.getElementById('averageIncome').textContent = "休息日，无收入";
                document.getElementById('statusMessage').textContent = "休息日，好好放松~";
                return;
            }

            // 设置工作时间
            const startHour = startTime.value.split(':')[0]
            const startMinute = startTime.value.split(':')[1]
            const workStart = new Date(now).setHours(startHour, startMinute, 0);
            const endHour = endTime.value.split(':')[0]
            const endMinute = endTime.value.split(':')[1]
            const workEnd = new Date(now).setHours(endHour, endMinute, 0);
            const currentTime = now.getTime();

            // 计算当日收入（月薪3000，30个工作日）
            let dayMonth = 30;
            if (rest.value === '1') {
              dayMonth = 22;
            } else if (rest.value === '2' || rest.value === '3') {
              dayMonth = 26;
            } else {
              dayMonth = 30;
            }
            const dailyRate = salary.value / dayMonth;

            if (currentTime < workStart) {
                // 上班前
                const timeUntilStart = Math.floor((workStart - currentTime) / (1000 * 60));
                document.getElementById('workStatus').textContent = "未开始";
                document.getElementById('workDuration').textContent = "未开始";
                document.getElementById('salaryCountdown').textContent = "未开始";
                document.getElementById('todayIncome').textContent = "¥0";
                document.getElementById('averageIncome').textContent = `¥${dailyRate.toFixed(2)}`;
                document.getElementById('statusMessage').textContent = 
                    `距离上班还有 ${Math.floor(timeUntilStart/60)}小时${timeUntilStart%60}分钟，再摸会儿鱼吧~`;
            } 
            else if (currentTime > workEnd) {
                // 下班后
                document.getElementById('workStatus').textContent = "已下班";
                document.getElementById('workDuration').textContent = "9小时0分";
                document.getElementById('salaryCountdown').textContent = "已完成";
                document.getElementById('todayIncome').textContent = `¥${dailyRate.toFixed(2)}`;
                document.getElementById('averageIncome').textContent = `¥${dailyRate.toFixed(2)}`;
                document.getElementById('statusMessage').textContent = "今日工作已结束，可以开始摸鱼了！";
            }
            else {
                // 工作中
                const workDuration = (currentTime - workStart) / (1000 * 60);
                const workHours = Math.floor(workDuration / 60);
                const workMinutes = Math.floor(workDuration % 60);
                
                const remainingTime = (workEnd - currentTime) / 1000; // 剩余时间（秒）
                const remainingHours = Math.floor(remainingTime / 3600);
                const remainingMinutes = Math.floor((remainingTime % 3600) / 60);
                const remainingSeconds = Math.floor(remainingTime % 60);

                document.getElementById('workStatus').textContent = "工作中";
                document.getElementById('workDuration').textContent = `${workHours}小时${workMinutes}分`;
                document.getElementById('salaryCountdown').textContent = 
                    `${remainingHours}小时${remainingMinutes}分${remainingSeconds}秒`;
                document.getElementById('todayIncome').textContent = `¥${(dailyRate * (workDuration / (9 * 60))).toFixed(2)}`;
                document.getElementById('averageIncome').textContent = `¥${dailyRate.toFixed(2)}`;
                document.getElementById('statusMessage').textContent = "再坚持一下，马上就能摸鱼了！";
            }
        }

        // 每秒更新一次时间
        setInterval(updateTime, 1000);
        updateTime();
    </script>
</body>
</html>